<template>
  <div class="app">
    <transition name="fade" mode="out-in">
      <a-extract-style>
          <Layout />
      </a-extract-style>
     </transition>
      <ThemeToggle />
  </div>
</template>

<script setup lang="ts">
/**
 * 根应用组件脚本
 * Nuxt应用的主入口组件
 * 负责整体应用布局、主题切换和页面过渡效果
 *
 * 该组件是Nuxt应用的根组件，所有页面都会在此组件内部渲染
 * 包含全局的样式设置和组件结构组织
 */
</script>
<style>
.app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  /* 可根据需要调整网格密度 */
  background-size: 20px 20px;
}
@keyframes textureFlow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 200px 200px;
  }
}
</style>